import { BarsOutlined, DatabaseOutlined, FileSyncOutlined, LineChartOutlined, SmileOutlined } from '@ant-design/icons';
import { Badge, Card, Layout, Menu, Result } from 'antd';
import React, { useEffect, useState } from 'react';
import { useAccess } from 'umi';
import { DrawerForm, PageContainer } from '@ant-design/pro-components';
import { parse } from '@/utils/historyUtils';
import { setToken } from '@/utils/token';
import TableOverview from './analysis/TableOverview';
import PageContainerDatahubRecord from '../datahub/record/components/PageContainerDatahubRecord';
import NotAccessPage from '@/components/NotAccessPage';

export default (): React.ReactNode => {
  const access = useAccess();

  const [tabActiveKey, setTabActiveKeyState] = useState<string>("assess");
  const [selectMenuName, setSelectMenuName] = useState<string>('质效考核');
  useEffect(() => {
    const { token } = parse(location.search) as { token: string };
    if (token && token.length > 0) {
      setToken(token)
    }
  }, [])
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };
  const menuList = () => {
    const menus = [];

    // if (access.inIframeShowAssess) {
    menus.push({
      label: <span>质效考核{renderBadge(0, tabActiveKey === 'assess')}</span>,
      key: 'assess',
      icon: <DatabaseOutlined />,
    });
    // }

    // if (access.inIframeShowDatahub) {
    menus.push({
      label: <span>大数据{renderBadge(0, tabActiveKey === 'datahub')}</span>,
      key: 'datahub',
      icon: <FileSyncOutlined />,
    });
    // }

    // if (access.inIframeShowTophub) {
    menus.push({
      label: <span>热搜热榜{renderBadge(0, tabActiveKey === 'tophub')}</span>,
      key: 'tophub',
      icon: <LineChartOutlined />,
    });
    // }
    return menus
  };
  return (
    <PageContainer
      header={{
        // title:
        title: (
          <div>
            <DrawerForm
              width="200px"
              trigger={<BarsOutlined style={{ fontSize: 20 }} />}
              drawerProps={{
                destroyOnClose: true,
                placement: 'left',
                closable: false,
              }}
              onVisibleChange={(visible: boolean) => {
                if (visible) {
                }
              }}
              submitter={false}
              onFinish={async (values) => { }}
            >
              <Menu
                onSelect={(info) => {
                  const key = info.key;
                  let menuName = '';
                  if (key === 'assess') {
                    menuName = '质效考核';
                  }
                  if (key === 'datahub') {
                    menuName = '大数据';
                  }
                  if (key === 'tophub') {
                    menuName = '热搜热榜';
                  }
                  setTabActiveKeyState(info.key);
                  setSelectMenuName(menuName);
                }}
                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                defaultSelectedKeys={[tabActiveKey]}
                mode="vertical"
                items={menuList()}
              />
            </DrawerForm>
            <span style={{ marginLeft: 10 }}>{selectMenuName}</span>
          </div>
        ),
        breadcrumb: {
          items: [],
        },
        style: {
          paddingBlockEnd: 0,
        },
        extra: (
          <>

          </>
        ),
      }}
    >
      <>
        {tabActiveKey === 'assess' && (
          <>
            <Result
              icon={<SmileOutlined />}
              title="该功能正在开发中，敬请期待!"
            // extra={<Button type="primary">Next</Button>}
            />
            <TableOverview />
          </>
        )}
        {tabActiveKey === 'datahub' &&
          // (access.inIframeShowDatahub ? <PageContainerDatahubRecord /> : <NotAccessPage />)}
          <PageContainerDatahubRecord />}
        {tabActiveKey === 'tophub' &&
          // (access.inIframeShowTophub ? <PageContainer /> : <NotAccessPage />)}
          <PageContainer />}
      </>

    </PageContainer>
  );
};
